<script setup>
import { onMounted, ref,defineProps, onUpdated } from "vue";
import * as echarts from 'echarts';
import {getBlogArticles} from '@/api/blog/blog_articles';


const browseDrawer = ref(false);
const articlestats = ref(null);

const  form = ref({});


// 仿造数据
const response = {
  data: {
    commandStats: [
      {
        name: "浏览量",
        value: 100
      },
      {
        name: "点赞量",
        value: 100
      },
      {
        name: "评论量",
        value: 390
      },
      
    ]
  }
}


function echartsHandle(){
  const articlestatsIntance = echarts.init(articlestats.value, "macarons");
  articlestatsIntance.setOption({
    tooltip: {
      trigger: "axis",
      formatter: "{b} <br/>{a} : {c}"
    },
    xAxis: {
      type: 'category',
      data: response.data.commandStats.map(item => item.name)
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        name: "文章",
        type: "line",
        data: response.data.commandStats.map(item => item.value),
        smooth: true,
        animationEasing: "cubicInOut",
        animationDuration: 1000
      }
    ]
  });

  window.addEventListener("resize", () => {
    articlestatsIntance.resize();
  });
}

const props = defineProps({
  id:  {
    type: Number,
  },
 
});

const showDataDrawer = () =>{
  browseDrawer.value = true
}


defineExpose({
  showDataDrawer
});

//获取文章数据
const getInfo = () => {
  const _id = props.id
  console.log(_id)
  if(_id === 0)
     return

  getBlogArticles(_id).then(response => {
    form.value = response.data;
  });
};

onUpdated(() => {
  getInfo()
});
</script>

<template>
        <div class="box-drawer"> 
      <el-drawer
        class="remark-drawer"
        v-model="browseDrawer"
        size="60%"
      >
        <template #header="{ close, titleId, titleClass }">
          <div :id="titleId" :class="titleClass">
            <span style="margin-right:20px;font-size: 18px;color:black;">{{ form.title }}</span>
            <span class="item-font">{{ form.publishedTime }}</span>&nbsp;
            
          </div>
        </template>
        <div >
          <el-divider style="margin:0;"/>
          <h4>发布至今的数据</h4>
          <el-row 
            :gutter="25"  
            class="data-row"
          >
            <el-col class="data-col" :span="8" >
              <div>
                浏览量
                <p>{{ form.views }}</p>
              </div>
            </el-col>
            <el-col class="data-col" :span="8" >
              <div>
                点赞量
                <p>{{form.likes}}</p>
              </div>
            </el-col>
            <el-col class="data-col" :span="8" >
              <div>
                评论量
                <p>{{ form.commentCount }}</p>
              </div>
            </el-col>
          </el-row>

          <h4>基础分析</h4>
          <!-- 图表 -->
          <el-row :gutter="20"  >
            <el-col :span="24">
              <el-card>
                <template #header>
                  <PieChart style="width: 1em; height: 1em; vertical-align: middle;" />&nbsp; 
                  <span style="vertical-align: middle;">文章统计</span>
                </template>
                  <div ref="articlestats" style="height: 400px;" />
              </el-card>
            </el-col>
            <el-col :span="12">
            </el-col>
          </el-row>
        </div>
      
      </el-drawer>
     </div>
</template>

<style scoped lang="scss">
.box-drawer {
  &:deep(.el-drawer.remark-drawer) {
    .el-drawer__header {
      margin-bottom: 0px !important;
    }
    
  }
}

.item-font{
  font-size: 14px; 
  color:grey;
}

.data-row{
   div{
    display: flex; /* 使用 flex 布局 */
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
    width:200px;
    height: 100px; /* 设置高度以便更好地居中显示 */
    flex-direction: column; /* 使子元素垂直排列 */
    text-align: center; /* 文本水平居中 */
    font-size: 14px;
    color: #606266; /* 设置字体颜色 */
  }

  .data-col p {
    margin: 10px 0 0 0; /* 去除默认的上下外边距 */
    font-size: 25px; /* 设置字体大小 */
    color: black; /* 设置字体颜色 */
  }
  .data-col div{
    width: 100%;
    height:100%;
    // 浅灰色
    background-color: rgb(245, 245, 245);
  }
}

</style>